<template>
  <div>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="6">
        <el-card style="margin-left: 20px;">
          <div style="flex: 1; text-align: center; color: darkgray; font-size: 14px;">
            <div style="font-size: 30px; font-weight: bold;">{{ userCount }}</div>
            <div>用户总数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div style="flex: 1; text-align: center; color: darkgray; font-size: 14px;">
            <div style="font-size: 30px; font-weight: bold;">{{ singerCount }}</div>
            <div>歌手总数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div style="flex: 1; text-align: center; color: darkgray; font-size: 14px;">
            <div style="font-size: 30px; font-weight: bold;">{{ songCount }}</div>
            <div>歌曲总数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="margin-right: 20px;">
          <div style="flex: 1; text-align: center; color: darkgray; font-size: 14px;">
            <div style="font-size: 30px; font-weight: bold;">{{ songListCount }}</div>
            <div>歌单总数</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="12">
        <h3 style="margin-bottom: 20px; margin-left: 20px;">用户性别比例</h3>
        <div style="background-color: white; margin-left: 20px;">
          <ve-pie :data="userGender" :theme="options1"/>
        </div>
      </el-col>
      <el-col :span="12">
        <h3 style="margin-bottom: 20px">歌曲流派分布</h3>
        <div style="background-color: white; margin-right: 20px;">
          <ve-histogram :data="songStyle" :theme="options2" :extend="extend"></ve-histogram>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <h3 style="margin: 0 0 20px 20px">歌手性别比例</h3>
        <div style="background-color: white; margin-left: 20px;">
          <ve-pie :data="singerGender" :theme="options3"></ve-pie>
        </div>
      </el-col>
      <el-col :span="12">
        <h3 style="margin: 0 0 20px 0">歌手地区分布</h3>
        <div style="background-color: white; margin-right: 20px;">
          <ve-histogram :data="singerLocation" :theme="options4"></ve-histogram>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {info} from '../api/index';

export default {
  data() {
    return {
      userCount: 0,
      singerCount: 0,
      songCount: 0,
      songListCount: 0,
      userGender: {
        columns: ['属性', '总数'],
        rows: [
          {'属性': '男', '总数': 0},
          {'属性': '女', '总数': 0}
        ]
      },
      singerGender: {
        columns: ['属性', '总数'],
        rows: [
          {'属性': '男', '总数': 0},
          {'属性': '女', '总数': 0},
          {'属性': '组合', '总数': 0},
          {'属性': '不明', '总数': 0}
        ]
      },
      singerLocation: {
        columns: ['属性', '总数'],
        rows: [
          {'属性': '内地', '总数': 0},
          {'属性': '港台', '总数': 0},
          {'属性': '欧美', '总数': 0},
          {'属性': '韩国', '总数': 0},
          {'属性': '日本', '总数': 0}
        ]
      },
      songStyle: {
        columns: ['属性', '总数'],
        rows: [
          {'属性': 'Pop', '总数': 0},
          {'属性': 'Rock&Roll', '总数': 0},
          {'属性': 'R&B', '总数': 0},
          {'属性': 'Electronic', '总数': 0},
          {'属性': 'Rap', '总数': 0},
          {'属性': 'Hip Hop', '总数': 0},
          {'属性': 'Jazz', '总数': 0},
          {'属性': 'Country', '总数': 0},
          {'属性': 'Alternative', '总数': 0},
          {'属性': 'House', '总数': 0},
        ]
      },
      extend:{
        "xAxis.0.axisLabel.rotate": 30
      },
      options1: {
        color: ['#87CEFA', '#FFC0CB']
      },
      options2: {
        color: ['#FD8A61'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        }
      },
      options3: {
        color: ['#7B68EE', '#1E90FF', '#87CEFA', '#FFC0CB']
      },
      options4: {
        color: ['#FEED78'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        }
      }
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getCount(detailVO, bindObj) {
      bindObj.rows.forEach(e => {
        e.总数 = detailVO.filter(i => i.detailName === e.属性)[0].count;
      });
    },
    getData() {
      info().then(res => {
        const {data, success} = res;
        if (!success) {
          this.$message.error('查询失败');
          return;
        }

        var user = data.filter(e => e.dtoName === 'consumer')[0];
        this.userCount = user.dtoCount;
        this.getCount(user.radioVO.filter(e => e.radioName === 'gender')[0].detailVO, this.userGender);

        var singer = data.filter(e => e.dtoName === 'singer')[0];
        this.singerCount = singer.dtoCount;
        this.getCount(singer.radioVO.filter(e => e.radioName === 'gender')[0].detailVO, this.singerGender);
        this.getCount(singer.radioVO.filter(e => e.radioName === 'loc')[0].detailVO, this.singerLocation);

        var song = data.filter(e => e.dtoName === 'song')[0];
        this.songCount = song.dtoCount;
        this.getCount(song.radioVO.filter(e => e.radioName === 'style')[0].detailVO, this.songStyle);

        var songList = data.filter(e => e.dtoName === 'songList')[0];
        this.songListCount = songList.dtoCount;
      })
    }
  }

}
</script>